<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2024-03-28 10:53:56
 * @LastEditors: huangtianyang
 * @LastEditTime: 2024-04-22 11:41:04
 * @FilePath: \cxl-driving-training\src\views\drivingSchoolManagement\shop\Index.vue
-->
<template>
    <div class="page-box">
        <TemplateVue
            :page="data.pageData"
            @search="data.onSearch"
            @reset="data.onReset"
            @paginationChange="data.onPaginationChange"
            @paginationSize="data.onPaginationSize"
            @operation="data.onOperation"
        >
        </TemplateVue>

        <!-- 弹窗 -->
        <DialogVue :data="data.dialog" @close="data.dialogClose('close', ruleFormRef)">
            <template #content>
                <el-form
                    ref="ruleFormRef"
                    :model="data.ruleForm"
                    :rules="data.rules"
                    label-width="auto"
                    class="demo-ruleForm"
                    status-icon
                >
                    <el-form-item label="所属驾校" prop="schoolName">
                        <el-select
                            v-model="data.ruleForm.schoolName"
                            clearable
                            placeholder="请选择驾校"
                            @change="data.onSelectSchoolChange"
                        >
                            <el-option
                                v-for="item in data.drivingSchoolOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="门店名称" prop="siteShopName">
                        <el-input v-model="data.ruleForm.siteShopName" clearable placeholder="请输入场地门店名称" />
                    </el-form-item>
                    <el-form-item label="详细地址" prop="address">
                        <el-input
                            v-model="data.ruleForm.address"
                            clearable
                            placeholder="请输入详细地址"
                            @input="data.onInputChange"
                        />
                    </el-form-item>
                    <el-form-item label=" ">
                        <MapVue
                            style="width: 100%"
                            :inputValue="data.dialog.inputVal"
                            :latValue="data.ruleForm.lat"
                            :lngValue="data.ruleForm.lng"
                            @change="data.onMapChange"
                        />
                    </el-form-item>

                    <div style="display: flex; justify-content: center; margin: 10px">
                        <el-button type="primary" @click="data.dialogClose('confirm', ruleFormRef)"> 确定 </el-button>
                        <el-button @click="data.dialogClose('cancel', ruleFormRef)">取消</el-button>
                    </div>
                </el-form>
            </template>
        </DialogVue>
    </div>
</template>
<script setup lang="ts">
import TemplateVue from '@/components/template/Index.vue'
import DistrictData from './index'
import { reactive, ref } from 'vue'
import DialogVue from '@/components/baseDialog/Index.vue'
import MapVue from '@/components/form/map.vue'

const ruleFormRef = ref()
const data = reactive(new DistrictData())
</script>

<style scoped lang="scss"></style>
